<%--
  Created by IntelliJ IDEA.
  User: zhangjie
  Date: 2018/8/16
  Time: 下午4:47
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ include file="/WEB-INF/jsp/component/common.jsp"%>
<html>
<head>
    <title>设备详情</title>
    <%@ include file="/WEB-INF/jsp/component/commonBottom.jsp" %>
    <link rel="stylesheet" href="${frames}/css/lib/bootstrap.min.css" type="text/css" type="text/css">
    <link rel="stylesheet" href="${frames}/css/lib/dataTables.bootstrap.css" type="text/css">
    <%--<link rel="stylesheet" href="${frames}/css/paginate.css" type="text/css">--%>
    <link rel="stylesheet" href="${newframe}/css/base/base.css" type="text/css">
    <link rel="stylesheet" href="${assets}/css/views/department/detail.css">
    <%@ include file="/WEB-INF/jsp/component/commonBottom.jsp"%>
    <style>
        .dataTables_empty{
            text-align:center !important;
        }
    </style>
</head>
<body>
<div>
    <%@ include file="../../breadline.jsp" %>
</div>
<div class="wrap">
    <div class="deparmentDetail">
        <div class="baseInformation">
            <h1>基本信息</h1>
            <div class="information">
                <div class="content">
                    <div class="left">
                        <div class="departName">
                            <label for="name">设备名称:&nbsp;</label>
                            <input type="text" v-model="name" id="name">
                        </div>
                        <%--<div class="departVersion">--%>
                            <%--<label for="type">设备类型:&nbsp;</label>--%>
                            <%--<input type="text" v-model="type" id="type">--%>
                        <%--</div>--%>
                        <div class="departStatus">
                            <label for="status">设备状态:&nbsp;</label>
                            <div style="display:inline-block" v-if="status == 1">
                                <input type="text" id="status" value="<medi:configVal name="instrumentStatus" key="1"/>">
                            </div>
                            <div style="display:inline-block" v-else-if="status == 2">
                                <input type="text" id="status" value="<medi:configVal name="instrumentStatus" key="2"/>">
                            </div>
                            <div style="display:inline-block" v-else-if="status == 3">
                                <input type="text" id="status" value="<medi:configVal name="instrumentStatus" key="3"/>">
                            </div>
                            <div style="display:inline-block" v-else-if="status == 4">
                                <input type="text" id="status" value="<medi:configVal name="instrumentStatus" key="4"/>">
                            </div>
                            <div style="display:inline-block" v-else-if="status == 5">
                                <input type="text" id="status" value="<medi:configVal name="instrumentStatus" key="5"/>">
                            </div>
                            <div style="display:inline-block" v-else-if="status == 6">
                                <input type="text" id="status" value="<medi:configVal name="instrumentStatus" key="6"/>">
                            </div>
                            <div style="display:inline-block" v-else-if="status == 7">
                                <input type="text" id="status" value="<medi:configVal name="instrumentStatus" key="7"/>">
                            </div>
                            <div style="display:inline-block" v-else-if="status == 8">
                                <input type="text" id="status" value="<medi:configVal name="instrumentStatus" key="8"/>">
                            </div>
                            <div style="display:inline-block" v-else-if="status == 9">
                                <input type="text" id="status" value="<medi:configVal name="instrumentStatus" key="9"/>">
                            </div>
                        </div>
                    </div>
                    <div class="right">
                        <div class="departSN">
                            <label for="SN">设备SN:&nbsp;</label>
                            <input type="text" v-model="SN" id="SN">
                        </div>
                        <%--<div class="departBrand">--%>
                            <%--<label for="brand">设备品牌:&nbsp;</label>--%>
                            <%--<input type="text" v-model="brand" id="brand">--%>
                        <%--</div>--%>
                        <div class="departHospital">
                            <label for="hospital">所属医院:&nbsp;</label>
                            <input type="text" v-model="hospital" id="hospital">
                        </div>
                    </div>
                </div>
            </div>
            <div class="Qrcode">
                <div class="box">
                    <img :src="pic" alt="">
                </div>
            </div>
        </div>
        <div class="bindInfo">
            <h1>绑定信息</h1>
            <ul class="WX">
                <li v-for="item of items" style="height:70px;" :class="item.id">
                    <div class="Name" style="width:20%;height:auto;">
                        <label for="bindName">微信昵称:&nbsp;</label>
                        <br>
                        <input type="text" v-model="item.nikeName" id="bindName"  readonly="readonly">
                    </div>
                    <div class="Info" style="width:30%;height:auto;">
                        <label for="bindInfo">绑定时间:&nbsp;</label>
                        <br>
                        <input type="text" id="bindInfo" v-model="item.createTime"  readonly="readonly">
                    </div>
                    <div  class="Info" style="width:30%;height:auto;">
                        <label for="type">微信推送:&nbsp;</label>
                        <br>
                        <select :title="item.id" name="type" style="width:150px;height:30px;" onchange="gradeChange(this)">
                            <option value="1" v-if="item.type == '1' " selected>全部数据</option>
                            <option value="1" v-else>全部数据</option>
                            <option value="2" v-if="item.type == '2' " selected>异常数据</option>
                            <option value="2" v-else>异常数据</option>
                            <option value="3" v-if="item.type == '3' " selected>不接收</option>
                            <option value="3" v-else>不接收</option>
                        </select>
                    </div>
                    <div class="delet" style="position:absolute;right:0px; top:25px;">
                        <button style="line-height:30px;width:100px;background:#35acfd;color:white;border-radius:5px;" class="btn-block" @click="deleteBind(item.id)" >删除</button>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="lease">
        <h1>租赁情况</h1>
        <div class="currentLease">
            <h2>目前租赁情况</h2>
            <table id="currentLeaseTable">
                <thead>
                    <tr style="background:#e6e6e6;">
                        <th >租借人</th>
                        <th >租借人联系方式</th>
                        <th >租借日期</th>
                        <th >已付押金</th>
                        <th >归还日期</th>
                        <th >归还设备状态</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td v-text="rentMan" style="text-align: left;color:#999999;"></td>
                        <td v-text="rentTel" style="text-align: center;color:#999999;"></td>
                        <td v-text="rentTime" style="text-align: center;color:#999999;"></td>
                        <td v-text="rentMoney" style="text-align: center;color:#999999;"></td>
                        <td v-text="backTime" style="text-align: center;color:#999999;"></td>
                        <td v-if="rentMan != '' ">
                            <span v-if="rentStatus == 0" style="text-align: center;color:#999999;display:inline-block;width:100%;">未归还</span>
                            <span v-else-if="rentStatus == 1" style="text-align: center;color:#999999;display:inline-block;width:100%;">已归还</span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="leaseHistory">
            <h2>租赁历史记录</h2>
            <table id="LeaseHistoryTable" class="display" cellspacing="10" width="100%">
                <thead>
                <tr style="background:#e6e6e6;">
                    <th>租借人</th>
                    <th>租借人联系方式</th>
                    <th>租借日期</th>
                    <th>已付押金</th>
                    <th>归还日期</th>
                    <th>归还设备状态</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>
</div>
<script src="${assets}/js/views/vue.min.js"></script>
<script src="${assets}/js/views/department/departmentDetail.js"></script>
<script>
    $(document).ready(function() {
        var table;
        var urlParam = decodeURI(window.location.href.split("?")[1]);
        var departmentId = '';
        departmentId = urlParam.split("departmentId=")[1].split("&")[0];
        $('#LeaseHistoryTable').DataTable({
                    "dom" : "t" + "<'row pageNum '<p>>",
                    "bFilter" : false,//去掉搜索框
                    "sLengthMenu":[10],
                    "bAutoWidth" : true, //自适应宽度
                    "bInfo":false,
                    "sPaginationType" : "full_numbers",
                    "ordering" : false,//是否允许Datatables开启排序
                    "bProcessing" : true,
                    "bServerSide" : true,
                    "sScrollX":"100%",
                    "sAjaxSource" : "${URL_BASE_SEARCHRENT}",
                    "sAjaxDataProp" : "dataList",//查询后，返回的集合
                    "fnServerData" : function(sSource, aoData, fnCallback) { //查询条件
                        aoData.push({
                            "name" : "instrumentId",
                            "value" :departmentId
                        }),
                        $.ajax({
                            "dataType" : 'json',
                            "url" : sSource,
                            "type" : 'post',
                            "data" : aoData,
                            "success" : function(resp){
                              var page = parseInt(resp.iTotalRecords / 10) + 3;
                              if(page >= 9){
                                  page = 9;
                              }
                                var W = page * 45
                                $('.pageNum').width(W + 'px');
                                fnCallback(resp);
                            }
                        })
                    },
                    "aoColumns" : [
                        {
                            "mDataProp" : "rentMan"
                        },
                        {
                            "mDataProp" : "rentTel"
                        },
                        {
                            "mDataProp" : "rentTime"
                        },
                        {
                            "mDataProp" : "rentMoney"
                        },
                        {
                            "mDataProp" : "backTime"
                        },
                        {
                            "targets" : 5,
                            "data" : null,
                            "fnCreatedCell" : function(nTd, sData, oData, iRow, iCol) {
                                if( oData.rentStatus === '0' ){
                                    $(nTd).text('未归还');
                                }else if( oData.rentStatus === '1' ){
                                    $(nTd).text('已归还');
                                }else{
                                    $(nTd).text('');
                                }
                            }
                        }],
                    "oLanguage" : {//插件的汉化
                        "sLengthMenu" : '',
                        "sZeroRecords" : "抱歉， 没有找到",
                        "sInfoEmpty" : "没有数据",
                        "sInfoFiltered" : "(从 _MAX_ 条数据中检索)",
                        "oPaginate" : {
                            "sFirst" : "",
                            "sPrevious" : "<b>上一页<b>",
                            "sLast" : "",
                            "sNext" : "<i>下一页</i>"

                        },
                        "sZeroRecords" : "没有检索到数据",
                        "sProcessing" : "<img src='' />",
                        "sSearch" : "搜索"
                    }
                });
    });
    function gradeChange(obj){
        console.log(obj.selectedIndex)
        $.ajax({
            url:"${URL_INSTRUMENT_UPDATEINSTRUMENTWECHAT}",
            type:'post',
            dataType: "json",
            data:{
                type : obj.selectedIndex+1,
                id : obj.title
            },
            success:function(data){
                console.log(data)
            }
        })
    }
</script>
</body>
</html>
